<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字溢出</title>
  <style>
    /*超出内容隐藏，点击显示全部内容*/
    div.test {
      white-space: nowrap;
      width: 200px;
      overflow: hidden;
      border: 1px solid #000000;
    }

    div.test:hover {
      overflow: visible;
    }

    /*换行规则*/
    p.test1 {
      width: 140px;
      border: 1px solid #000000;
      word-break: keep-all;/*将连字符打断：*/
    }

    p.test2 {
      width: 140px;
      border: 1px solid #000000;
      word-break: break-all;/*将在任何字符处中断*/
    }
  </style>
</head>
<body>
<div class="test" style="text-overflow:ellipsis;">这里有一些无法容纳在框中的长文本</div>
<br>
<div class="test" style="text-overflow:clip;">这里有一些无法容纳在框中的长文本</div>

<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
</body>
</html>